<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/js/javascript.fullPage.css"/>
    <script src="<%=path%>/js/jquery-1.11.3.min.js"></script>
    <script src="<%=path%>/js/javascript.fullPage.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
//滚动页面插件
            $('#fullpage').fullpage({
                navigation: true,
                navigationPosition: 'right',
                anchors: ['indexPage', 'intro', 'intro2', 'activity', 'news', 'contactus'],
                slidesNavigation: true,
                slidesNavPosition: 'bottom',
                afterLoad: function (anchorLink, index) {
                    if (index == 1) {
                        move('#s1-w1').set('margin-left', '-527px').set('opacity', 1).end();
                        move('#s1-w2').set('margin-right', '-584px').set('opacity', 1).end();
                        move('#s1-bottom').set('bottom', '5%').set('opacity', 1).end();
                        move('#s1-logo').set('top', '50%').set('opacity', 1).duration('2s').end();
                    }
                    if (index == 2) {
                        move('#s2-phone').set('margin-left', '-570px').duration('2s').set('opacity', 1).end();
                        move('#s2-w1').set('margin-left', '-50px').set('opacity', 1).end();
                        move('#s2-w2').set('margin-left', '-50px').set('opacity', 1).end();
                    }

                    if (index == 3) {
                        move('#s3-phone').set('margin-left', '-30px').set('opacity', 1).end();
                        move('#s3-w').set('margin-left', '-420px').set('opacity', 1).end();
                    }


                    if (index == 4) {
                        move('#s5-icon').set('top', '8%').set('opacity', 1).end();
                        // move('#s5-p').set('top', '40%').set('opacity', 1).scale(1.2).end();
                    }

                    if (index == 5) {
                        move('#s6-icon').set('margin-top', '60px').set('opacity', 1).end();
                        // move('#s6-p1').set('top', '20%').set('opacity', 1).end(function(){
                        // 	move('#s6-p2').set('top', '52%').set('opacity', 1).end(function(){
                        // 		move('#s6-p3').set('top', '78%').set('opacity', 1).end();
                        // 	});
                        // });
                    }

                    if (index == 6) {
                        move('#s7-b1').set('top', '50%').set('opacity', 1).end();
                        move('#s7-b2').set('top', '50%').set('opacity', 1).end();
                    }
                },
                onLeave: function (index, nextIndex, direction) {
                    if (index == 1) {
                        move('#s1-w1').set('margin-left', '-600px').set('opacity', 0).duration(0.2).end();
                        move('#s1-w2').set('margin-right', '-824px').set('opacity', 0).duration(0.2).end();
                        move('#s1-bottom').set('bottom', '0%').set('opacity', 0).duration(0.2).end();
                        move('#s1-logo').set('top', '0%').set('opacity', 0).duration(0.2).end();
                    }
                    if (index == 2) {
                        move('#s2-phone').set('margin-left', '-1000px').set('opacity', 0).duration(0.2).end();
                        move('#s2-w1').set('margin-left', '200px').set('opacity', 0).duration(0.2).end();
                        move('#s2-w2').set('margin-left', '200px').set('opacity', 0).duration(0.2).end();
                    }
                    if (index == 3) {
                        move('#s3-phone').set('margin-left', '-250px').set('opacity', 0).duration(0.2).end();
                        move('#s3-w').set('margin-left', '-80px').set('opacity', 0).duration(0.2).end();
                    }
                    if (index == 4) {
                        move('#s5-icon').set('top', '0%').set('opacity', 0).duration(0.2).end();
                        // move('#s5-p').set('top', '100%').set('opacity', 0).scale(1).duration(0.2).end();
                    }
                    if (index == 5) {
                        move('#s6-icon').set('margin-top', '0px').set('opacity', 0).duration(0.2).end();
                        // move('#s6-p1').set('top', '100%').set('opacity', 0).duration(0.2).end();
                        // move('#s6-p2').set('top', '100%').set('opacity', 0).duration(0.2).end();
                        // move('#s6-p3').set('top', '100%').set('opacity', 0).duration(0.2).end();
                    }
                    if (index == 6) {
                        move('#s7-b1').set('top', '20%').set('opacity', 0).duration(0.2).end();
                        move('#s7-b2').set('top', '80%').set('opacity', 0).duration(0.2).end();
                    }
                }
            });
        });
    </script>
</head>
<body>
<div id="fullpage">
    <!--slide-->
    <c:forEach var="item" items="${data}">
        <div class="slide">
            <div class="news-container">
                <div class="news-item-img">
                    <img src="${item.url}" alt="" width="100%" height="100%">
                </div>
            </div>
        </div>
        <!--/slide-->
    </c:forEach>
</div>
</body>
</html>
